<template>
    <div>
        <h1>监控台</h1>

        <button ref="btn" id="myb" @click="increment">{{ count }}</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 1
        }
    },
    methods: {
        increment() {
            /**
             * ! 如果需要获取数据变化之后，最新的真实DOM相关的内容，使用
             * ! this.$nextTick()，将代码放在它的回调函数中执行
             */
            this.count++;
            this.$nextTick(() => {
                console.log(document.getElementById('myb').innerHTML);
                console.log(this.$refs.btn.innerHTML);
            });
        },
    },
}
</script>